<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	onUnload(() => {
		clearInterval(timeId)
	})
	const xieyi = () => {
		router.push({
			name: "appAgreement",
			params: {
				name: '会员服务协议'
			}
		})
	}
	const getVipList = (() => {
		proxy.$req('GET', proxy.$api.getAppVip, {
			memberId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res);
			vipObj.equity = res.result.rightsList
			vipObj.mainDetail = res.result.settingList
			vipOpenId.value = vipObj.mainDetail[0].id
		})
	})();
	let vipObj = reactive({
		state: 0,
		mainDetail: [],
		equity: []
	})
	let vipOpenId = ref()
	const change = (idx, item) => {
		console.log(idx)
		vipObj.state = idx
		vipOpenId.value = item.id
		console.log(item)
	}
	let timeId;
	let tradeNo = ref('')
	let payId = ref('')
	const submitOrder = () => {
		proxy.$req('POST', proxy.$api.payVip, {
			memberId: userStoreInfo.userInfo.id,
			vipCardSettingId: vipOpenId.value
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				let url = JSON.parse(res.result).resp_data.counter_url
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)
				console.log('app');
				// #endif
				// #ifdef H5
				window.open(url)
				console.log('h5');
				// #endif
				tradeNo.value = JSON.parse(res.result).resp_data.out_order_no
				payId.value = JSON.parse(res.result).resp_data.pay_order_no
				// timeId = setInterval(() => {
				// 	userStoreInfo.updateUserInfo(userStoreInfo.userInfo.id).then((res) => {
				// 		if (userStoreInfo.userFlag == 0 && res.result.isVip == 1) {
				// 			uni.$u.toast('支付成功')
				// 			clearInterval(timeId)
				// 			router.push({
				// 				name: 'payStatus',
				// 				params: {
				// 					status: '支付成功',
				// 					backNum: 2
				// 				}
				// 			})
				// 		} else if (userStoreInfo.userFlag == 1 && res.result.businessVip == 1) {
				// 			uni.$u.toast('支付成功')
				// 			clearInterval(timeId)
				// 			router.push({
				// 				name: 'payStatus',
				// 				params: {
				// 					status: '支付成功',
				// 					backNum: 2
				// 				}
				// 			})
				// 		} else if (userStoreInfo.userFlag == 2 && res.result.supplierVip == 1) {
				// 			uni.$u.toast('支付成功')
				// 			clearInterval(timeId)
				// 			router.push({
				// 				name: 'payStatus',
				// 				params: {
				// 					status: '支付成功',
				// 					backNum: 2
				// 				}
				// 			})
				// 		}
				// 	})
				// }, 2000)
			}
		})
	}
	onShow(() => {
		if (tradeNo.value != '' && payId.value != '') {
			isPaySuccess()
		}
	})
	const isPaySuccess = () => {
		proxy.$req('POST', proxy.$api.ShoppingStoreOrder, {
			tradeNo: tradeNo.value,
			payId: payId.value
		}).then((res) => {
			if (res.code != 200 || res.result == null) {
				console.log("出错了")
				uni.$u.toast(res.message)
				return
			}
			let a = JSON.parse(JSON.stringify(res)).result
			let data = JSON.parse(a).resp_data
			if (data.order_status == 0) {
				uni.$u.toast('待支付')
			} else if (data.order_status == 1) {
				uni.$u.toast('支付中,请检查')
			} else if (data.order_status == 2) {
				uni.$u.toast('支付成功')
				router.push({
					name: 'payStatus',
					params: {
						status: '支付成功',
						backNum: 2
					}
				})
			} else if (data.order_status == 3) {
				uni.$u.toast('支付失败')
			} else if (data.order_status == 4) {
				uni.$u.toast('订单已过期')
			} else if (data.order_status == 5) {
				uni.$u.toast('订单已取消')
			} else if (data.order_status == 6) {
				uni.$u.toast('部分退款或者全部退款')
			}
		})
	}
</script>

<template>
	<view class="background">
		<u-navbar class="navbar" bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
			<template #left>
				<view style="color: white;"> <u-icon name="arrow-left" color="white" size="17px"></u-icon> </view>
			</template>
			<template #center>
				<view style="color: white;"></view>
			</template>
		</u-navbar>
		<view class="card">
			<view class="cardH">
				<text class="text">
					美业
				</text>
				<view class="vip">
					VIP
				</view>
			</view>
			<view class="cardF">
				会员省心省钱
			</view>
			<view class="cardF">
				{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'':userStoreInfo.userInfo.vipTime+' 到期':'' }}
				{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'':userStoreInfo.userInfo.businessVipTime+' 到期':'' }}
				{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'':userStoreInfo.userInfo.supplierVipTime+' 到期':'' }}
			</view>
		</view>
	</view>
	<view class="main">
		<view class="mainTitle">
			{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'开通会员，享更多福利':'续费会员，享更多福利':'' }}
			{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'开通会员，享更多福利':'续费会员，享更多福利':'' }}
			{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'开通会员，享更多福利':'续费会员，享更多福利':'' }}
		</view>
		<view class="mainCenter">
			<u-scroll-list :indicator="false" style="height: 276rpx;">
				<view class="centerModal" :class="{'ismainCenter': vipObj.state == index}" @click="change(index,item)"
					v-for="(item,index) in vipObj.mainDetail" :key="index">
					<view class="top" :class="{'none': vipObj.state != index}">
						{{item.name}}
					</view>
					<view class="cenH">
						{{item.vipCardName}}
					</view>
					<view class="cenC">
						<text>￥</text><text class="fontSize"
							:class="{'isfontSize': vipObj.state == index}">{{item.price/100}}</text>
					</view>
					<view class="cenF">
						{{item.info}}
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="xieyi">
			<text class="xieyiL">开通前阅读</text><text class="xieyiR" @click="xieyi">《会员服务协议》</text>
		</view>
		<view class="equity">
			<view class="title">
				尊享权益
			</view>
			<view class="equityBox">
				<view class="modal" v-for="(item,index) in vipObj.equity" :key="index">
					<view class="modalL">
						<image style="width: 96rpx;height: 96rpx;" src="@/static/images/vipEquity1.png" mode=""></image>
					</view>
					<view class="modalR">
						<view class="modalRtitle">
							{{item.name}}
						</view>
						<view class="modalRtext">
							{{item.info}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
	<view class="submit" @click="submitOrder">
		{{ userStoreInfo.userFlag==0?userStoreInfo.userInfo.isVip==0?'立即购买会员':'立即续费会员':'' }}
		{{ userStoreInfo.userFlag==1?userStoreInfo.userInfo.businessVip==0?'立即购买会员':'立即续费会员':'' }}
		{{ userStoreInfo.userFlag==2?userStoreInfo.userInfo.supplierVip==0?'立即购买会员':'立即续费会员':'' }}
	</view>
</template>

<style lang="scss">
	.submit {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-image: url(@/static/images/vipBuyBtn.png);
		background-size: 100%;
		position: fixed;
		bottom: 50rpx;
		left: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		box-sizing: border-box;
	}

	.equityBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.main {
		width: 750rpx;
		height: 1292rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -110rpx;
		padding: 40rpx 30rpx 0 30rpx;
		box-sizing: border-box;

		.equity {
			margin-top: 60rpx;
			padding-bottom: 150rpx;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 30rpx;
			}

			.modal {
				width: 328rpx;
				height: 152rpx;
				background: #FAFAFA;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-around;
				padding: 25rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				.modalR {
					padding-top: 13rpx;
					box-sizing: border-box;

					.modalRtitle {
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.65);
					}

					.modalRtext {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.25);
					}
				}

			}
		}

		.xieyi {
			margin-top: 40rpx;

			.xieyiR {
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.mainTitle {
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
			margin: 0 auto;
			margin-bottom: 50rpx;
		}

		.mainCenter {
			margin-top: 20rpx;
			// display: flex;
			// justify-content: space-between;

			.centerModal {
				position: relative;
				width: 206rpx;
				height: 256rpx;
				background: linear-gradient(134deg, #FFF7ED 0%, #f3e6de 100%);
				padding: 40rpx 20rpx 10rpx 20rpx;
				box-sizing: border-box;
				text-align: center;
				border-radius: 16rpx;
				border: 5rpx solid rgba(200, 200, 200, 0);
				margin: 0 17rpx;
				margin-top: 20rpx;

				.none {
					display: none;
				}

				.top {
					position: absolute;
					top: -20rpx;
					left: 3rpx;
					width: 134rpx;
					height: 52rpx;
					background-image: url(@/static/images/viptop.png);
					background-size: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 52rpx;

				}

				.cenH {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.65);
				}

				.cenC {
					width: 150rpx;
					height: 72rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					margin: 10rpx 0 35rpx 0;

					.fontSize {
						font-size: 65rpx;
						background: linear-gradient(102deg, #5C4243 0%, #DD6B83 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent
					}

					.isfontSize {
						background: black;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent
					}

				}

				.cenF {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

			.ismainCenter {
				background: linear-gradient(137deg, #FFF7ED 0%, #F6D7C5 100%);
				// border: 5rpx solid;
				// border-image: linear-gradient(180deg, rgba(204, 123, 138, 1), rgba(146, 76, 83, 1)) 4 4;	
				// clip-path: inset(0 round 1px);
				border-radius: 16rpx;
				width: 206rpx;
				height: 256rpx;
				border: 2px solid #AD626D;

			}

		}
	}

	.background {
		width: 750rpx;
		height: 440rpx;
		background-image: url(@/static/images/VipBackground.png);
		background-size: 100%;

		.card {
			width: 750rpx;
			height: 440rpx;
			margin: auto;
			background-image: url(@/static/images/maxVip.png);
			background-size: 100%;
			box-sizing: border-box;
			padding: 100rpx;

			.cardH {
				display: flex;

				.text {
					font-size: 40rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 56rpx;
					background: linear-gradient(129deg, #FFD4BB 0%, #FFE8D3 50%, #FFD2C2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin-right: 15rpx;
				}

				.vip {
					width: 64rpx;
					height: 34rpx;
					background-color: #FFDDCB;
					font-size: 24rpx;
					font-weight: 400;
					color: #7F3632;
					text-align: center;
					border-radius: 8rpx;
					margin-top: 10rpx;
				}
			}

			.cardF {
				color: #FFE7D2;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>